import React,{Component,View,StyleSheet,Text} from 'react-native';
import FontIcon from 'react-native-vector-icons/FontAwesome';
//声音播放
import AudioPlayer from 'react-native-audioplayer';
//颜色
import * as MColor from '../../designColor/meterialColor';
//reduce
import {bindActionCreators} from 'redux';
import * as mainScreenActions from '../../actions/mainScreenActions';
import { connect } from 'react-redux';

class topbar extends Component {
  static propTypes = {
    name: React.PropTypes.string,
  };

  constructor(props) {
    super(props);
  }
  //===================单击左上角图标======================
  _opendrawer=()=>{
    AudioPlayer.play('effect_tick');//播放按键声水滴
    this.props.openDrawer();
  };
  render() {
    return (
      <View style={styles.topbar} >
      	<Text style={styles.iconLeft} onPress={this._opendrawer}>
          <FontIcon name="reorder" size={25} color="white" />
        </Text>
        {/*中间部分文字*/}
        <View style={styles.title}>
          {/*<Text style={styles.textfarm}>高村猪场</Text>*/}
          <Text style={styles.textfarm}>{this.props.reduxTitle}</Text>
          <Text style={styles.textfarm}>{this.props.reduxFarmunit}</Text>
        </View>
        <Text style={styles.iconLeft}>
          <FontIcon name="reorder" size={25} color="white" />
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  topbar:{
  	flex:2,
  	backgroundColor:MColor.DARK_PRIMARY_COLOR,
    flexDirection:'row',
    justifyContent:'space-around',
    alignItems:"center",
    //安卓的shadow 效果只在5.0以上有效
    elevation:2
  },
  iconLeft:{
    //backgroundColor:'red',
    flex:2,
    justifyContent:'center',
    alignItems:"center",
    textAlign:'center'
  },
  title:{
    flex:10,
    justifyContent:'center',
    //backgroundColor:'yellow'
  },
  textfarm:{
    textAlign:"center",
    color:MColor.TEXT_ICONS,
    fontSize:14
  },
});

//将全局state绑定到组件的props中
function mapStateToProps(state) {
  return { 
    reduxTitle:state.mainScreenRedux.mainscreen.title,
    reduxFarmunit:state.mainScreenRedux.mainscreen.farmunit,
  }
}

//绑定一个方法到props中
function mapDispatchToProps(dispatch) {
  var mapaction=bindActionCreators(mainScreenActions, dispatch);
  return {
    reduxSelectfarm:mapaction.reduxSelectfarm,
  }
}

//将全局的state绑定到组件中
export default connect(mapStateToProps,mapDispatchToProps)(topbar);